<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>客服服务100000</title>
<link rel="stylesheet" href="dist/css/chat.css">
<script type="text/javascript" src="dist/js/jquery-1.12.3.min.js"></script>
<script type='text/javascript' src='./demo/javascript/dist/webim.config.js'></script>
<script type='text/javascript' src='./sdk/dist/strophe-1.2.8.min.js'></script>
<!--<script type='text/javascript' src='./sdk/dist/websdk-1.4.10.min.js'></script>-->
<script src='http://downloads.easemob.com/downloads/cdn/websdk-1.4.5.min.js'></script>
<script type="text/javascript">
	
	$(document).on('click', '.emoji', function() {	 
		if($(this).parent().parent().parent().siblings(".biaoqing").css("display") == 'none'){	
			$(this).parent().parent().parent().siblings(".biaoqing").show();
		}else{
			$(this).parent().parent().parent().siblings(".biaoqing").hide();
		} 
	});
</script>
<style>

.fileinbg{
	background:url('./dist/images/img2.jpg') center left no-repeat;
}

</style>
</head>
<body>
  <div id="chat">
     <div class="sidebar">
        <div class="m-card">
           <header><img class="avatar" alt="Coffce" src="dist/images/1.jpg" width="40" height="40"><p class="name">Coffce</p></header>
        </div>
        <!--v-component-->
       <div class="m-list">
          <ul>
            <!--v-for-start-->
            <li id="hyl" onclick='xvchat(90000)' class="active hylist90000"><img class="avatar" alt="系统消息" src="dist/images/2.png"><p class="name">系统消息</p></li>
              
            <!--v-for-end-->
          </ul>
        </div>
        <!--v-component-->
     </div>
     <div class="main">
       <div key='90000' class="conchat"  id="conchatl">
          <div class="m-message">
             <ul id='ml90000'>
                <!--v-for-start-->
                
              <!--v-for-end-->
            </ul>
          </div>
          <!--v-component-->
          <div class="m-text">
              <div class="img_area">
                  <span class="emoji"><img src="dist/images/img1.jpg" /></span>
                  <span class='fileinbg'>
                  <input type="file" id="file90000" key='90000' class='file' value='' style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>  
                  </span>
              </div>
              <div class="textarea">
                   <textarea id='mt90000' placeholder=""></textarea>
              </div>
              <div class="button">
                   <input type="button" onclick='fstext(90000)' id="" value="发送" />
              </div>
          </div>
          <!--v-component-->
          
       </div>
       
       <div class="biaoqing">
			    <ul>
			    <li key="[):]" class="webim-emoji-item"><img src="demo/images/faces/ee_1.png"></li>
			    <li key="[:D]" class="webim-emoji-item"><img src="demo/images/faces/ee_2.png"></li>
			    <li key="[;)]" class="webim-emoji-item"><img src="demo/images/faces/ee_3.png"></li>
			    <li key="[:-o]" class="webim-emoji-item"><img src="demo/images/faces/ee_4.png"></li>
			    <li key="[:p]" class="webim-emoji-item"><img src="demo/images/faces/ee_5.png"></li>
			    <li key="[(H)]" class="webim-emoji-item"><img src="demo/images/faces/ee_6.png"></li>
			    <li key="[:@]" class="webim-emoji-item"><img src="demo/images/faces/ee_7.png"></li>
			    <li key="[:s]" class="webim-emoji-item"><img src="demo/images/faces/ee_8.png"></li>
			    <li key="[:$]" class="webim-emoji-item"><img src="demo/images/faces/ee_9.png"></li>
			    <li key="[:(]" class="webim-emoji-item"><img src="demo/images/faces/ee_10.png"></li>
			    <li key="[:'(]" class="webim-emoji-item"><img src="demo/images/faces/ee_11.png"></li>
			    <li key="[:|]" class="webim-emoji-item"><img src="demo/images/faces/ee_12.png"></li>
			    <li key="[(a)]" class="webim-emoji-item"><img src="demo/images/faces/ee_13.png"></li>
			    <li key="[8o|]" class="webim-emoji-item"><img src="demo/images/faces/ee_14.png"></li>
			    <li key="[8-|]" class="webim-emoji-item"><img src="demo/images/faces/ee_15.png"></li>
			    <li key="[+o(]" class="webim-emoji-item"><img src="demo/images/faces/ee_16.png"></li>
			    <li key="[<o)]" class="webim-emoji-item"><img src="demo/images/faces/ee_17.png"></li>
			    <li key="[|-)]" class="webim-emoji-item"><img src="demo/images/faces/ee_18.png"></li>
			    <li key="[*-)]" class="webim-emoji-item"><img src="demo/images/faces/ee_19.png"></li>
			    <li key="[:-#]" class="webim-emoji-item"><img src="demo/images/faces/ee_20.png"></li>
			    <li key="[:-*]" class="webim-emoji-item"><img src="demo/images/faces/ee_21.png"></li>
			    <li key="[^o)]" class="webim-emoji-item"><img src="demo/images/faces/ee_22.png"></li>
			    <li key="[8-)]" class="webim-emoji-item"><img src="demo/images/faces/ee_23.png"></li>
			    <li key="[(|)]" class="webim-emoji-item"><img src="demo/images/faces/ee_24.png"></li>
			    <li key="[(u)]" class="webim-emoji-item"><img src="demo/images/faces/ee_25.png"></li>
			    <li key="[(S)]" class="webim-emoji-item"><img src="demo/images/faces/ee_26.png"></li>
			    <li key="[(*)]" class="webim-emoji-item"><img src="demo/images/faces/ee_27.png"></li>
			    <li key="[(#)]" class="webim-emoji-item"><img src="demo/images/faces/ee_28.png"></li>
			    <li key="[(R)]" class="webim-emoji-item"><img src="demo/images/faces/ee_29.png"></li>
			    <li key="[({)]" class="webim-emoji-item"><img src="demo/images/faces/ee_30.png"></li>
			    <li key="[(})]" class="webim-emoji-item"><img src="demo/images/faces/ee_31.png"></li>
			    <li key="[(k)]" class="webim-emoji-item"><img src="demo/images/faces/ee_32.png"></li>
			    <li key="[(F)]" class="webim-emoji-item"><img src="demo/images/faces/ee_33.png"></li>
			    <li key="[(W)]" class="webim-emoji-item"><img src="demo/images/faces/ee_34.png"></li>
			    <li key="[(D)]" class="webim-emoji-item"><img src="demo/images/faces/ee_35.png"></li>
			    </ul>
			   </div>
    </div>
 </div>
<script type="text/javascript">
  $(function($){
	$('.m-list ul li').click(function(){
		$(this).addClass('active').siblings('li').removeClass('active');
		var index = $(this).index();
		$('.conchat').eq(index).show().siblings('.conchat').hide();
	 })
   })
</script>
<script>
//发送文字消息
function fstext(id){
	var id=String(id);
	sendPrivateText(id);
}
//发送图片消息
$('.file').change(function(){
	var file=$(this).attr('id');
	var zrkto=$(this).attr('key');
	sendPrivateImg(file,zrkto);
});
//退出
function logout(){
	conn.close();
}
//创建聊天框
function conhylist(message){
	if($("#ml"+message.from).length>0){
		console.log('存在');
	}else{
		$("#hyl").after("<li onclick='xvchat("+message.from+")'  class='hylist"+message.from+"'><img class='avatar' alt='李wu' src='dist/images/3.jpg'>"+
		  "<p class='name'>李wu</p></li>");
		$("#conchatl").after("<div key='"+message.from+"' class='conchat' style='display:none;'>"+
          "<div class='m-message'><ul id='ml"+message.from+"'></ul></div>"+
          "<div class='m-text'><div class='img_area'>"+
          "<span class='emoji'><img src='dist/images/img1.jpg' /></span>"+
          "<span class='fileinbg'>"+
          "<input type='file' class='file' key='"+message.from+"' id='file"+message.from+"' value='' style='filter:alpha(opacity=0);opacity:0;width:100%;height:100%;'/>"+
          "</span></div><div class='textarea'>"+
          "<textarea id='mt"+message.from+"' placeholder=''></textarea>"+
          "</div><div class='button'>"+
          "<input type='button' onclick='fstext("+message.from+")' value='发送' />"+
          "</div></div></div>");
	} 
}
//选框切换
function xvchat(id){
	$(".active").removeClass('active');
	$(".hylist"+id).addClass("active");
	$(".conchat").css('display','none');
	$("[key='"+id+"']").css('display','block');
	//alert(id);
	var key=$(this).attr('class');
	//alert(key);
}
</script>
<script>

//alert($("#hyl").children().length);

</script>
<script language="javascript" type="text/javascript">
WebIM.Emoji = {
	    path: 'demo/images/faces/'  /*表情包路径*/
	    , map: {
	        '[):]': 'ee_1.png',
	        '[:D]': 'ee_2.png',
	        '[;)]': 'ee_3.png',
	        '[:-o]': 'ee_4.png',
	        '[:p]': 'ee_5.png',
	        '[(H)]':'ee_6.png',
	        '[:@]':'ee_7.png',
	        '[:s]':'ee_8.png',
	        '[:$]':'ee_9.png',
	        '[:(]':'ee_10.png',
	        "[:'(]":'ee_11.png',
	        '[:|]':'ee_12.png',
	        '[(a)]':'ee_13.png',
	        '[8o|]':'ee_14.png',
	        '[8-|]':'ee_15.png',
	        '[+o(]':'ee_16.png',
	        '[<o)]':'ee_17.png',
	        '[|-)]':'ee_18.png',
	        '[*-)]':'ee_19.png',
	        '[:-#]':'ee_20.png',
	        '[:-*]':'ee_21.png',
	        '[^o)]':'ee_22.png',
	        '[8-)]':'ee_23.png',
	        '[(|)]':'ee_24.png',
	        '[(u)]':'ee_25.png',
	        '[(S)]':'ee_26.png',
	        '[(*)]':'ee_27.png',
	        '[(#)]':'ee_28.png',
	        '[(R)]':'ee_29.png',
	        '[({)]':'ee_30.png',
	        '[(})]':'ee_31.png',
	        '[(k)]':'ee_32.png',
	        '[(F)]':'ee_33.png',
	        '[(W)]':'ee_34.png',
	        '[(D)]':'ee_35.png',
	    }
	};
    
    var zrkipu='100000';
    var zrkipm='123456';
    //var zrkto='100000';

	var conn = new WebIM.connection({
	    https: WebIM.config.https,
	    url: WebIM.config.xmppURL,
	    isAutoLogin: WebIM.config.isAutoLogin,
	    isMultiLoginSessions: WebIM.config.isMultiLoginSessions
	});
	
	$(".webim-emoji-item").click(function(){
		 var bqkey=$(this).attr('key');
		 //alert(bqkey);return false;
		 $(".conchat").each(function(){
	         //判断每一个div，其css中display是否为block
	         if($(this).css("display")=="block"){
	             var zrkto=$(this).attr('key');
	             var textmsg=document.getElementById("mt"+zrkto);
	     	     var msg_text =textmsg.value;
	     	     //alert(msg_text);return false;
	     	     msg_text+=bqkey;
	     		 document.getElementById("mt"+zrkto).value=msg_text;
	         }
		 });
		
	});
	
	var options = { 
	  apiUrl: WebIM.config.apiURL,
	  user: zrkipu,
	  pwd: zrkipm,
	  appKey: WebIM.config.appkey
	};
	conn.open(options);
	
	//发送文本消息
	var sendPrivateText = function (zrkto) {
		//alert(zrkto);return false;
	    var id = conn.getUniqueId();                 // 生成本地消息id
	    var msg = new WebIM.message('txt', id);// 创建文本消息
	    var textmsg=document.getElementById("mt"+zrkto);
	    var msg_text =textmsg.value;
	    var msg_list=document.getElementById("ml"+zrkto);
	    if(msg_text==''){
	    	return false;
	    }
	    msg.set({
	        msg: msg_text,                  // 消息内容
	        to: zrkto,                   // 接收消息对象（用户id）
	        roomType: false,
	        success: function (id, serverMsgId) {
	        	
	        	msg_text=WebIM.utils.parseEmoji(msg_text);
	        	console.log(msg_text);
	        	$("#ml"+zrkto).append("<li class='self'>"+
	                    "<img class='avatar' src='dist/images/1.jpg'>"+
	                    "<div class='con'>"+
	                       "<p class='time'><span>Coffce 2017/4/20 上午8:40:20</span></p>"+
	                       "<div class='text'>"+msg_text+"</div>"+
	                    "</div></li>");
	        	$("#mt"+zrkto).val('');
	        	
	        }
	    });
	    msg.body.chatType = 'singleChat';
	    conn.send(msg.body);
	};
	
	// 单聊发送图片消息
	var sendPrivateImg = function (file,zrkto) {
	    var id = conn.getUniqueId();                   // 生成本地消息id
	    var msg = new WebIM.message('img', id);        // 创建图片消息
	    var input = document.getElementById(file);  // 选择图片的input
	    var file = WebIM.utils.getFileUrl(input);      // 将图片转化为二进制文件
	    
	    var allowType = {
	        'jpg': true,
	        'gif': true,
	        'png': true,
	        'bmp': true,
	        '':true,
	    };
	    if (file.filetype.toLowerCase() in allowType) {
	        var option = {
	            apiUrl: WebIM.config.apiURL,
	            file: file,
	            to: zrkto,                       // 接收消息对象
	            roomType: false,
	            chatType: 'singleChat',
	            onFileUploadError: function () {      // 消息上传失败
	            	alert('onFileUploadError');
	                console.log('onFileUploadError');
	            },
	            onFileUploadComplete: function () {   // 消息上传成功
	                console.log('onFileUploadComplete');
	            },
	            success: function () {                // 消息发送成功
	            	console.log(file);
	            	$("#ml"+zrkto).append("<li class='self'>"+
		                    "<img class='avatar' src='dist/images/1.jpg'>"+
		                    "<div class='con'>"+
		                       "<p class='time'><span>Coffce 2017/4/20 上午8:40:20</span></p>"+
		                       "<div class='text'><img src='"+file.url+"'></div>"+
		                    "</div></li>");
	            	input.value='';
	            },
	            flashUpload: WebIM.flashUpload
	        };
	        msg.set(option);
	        conn.send(msg.body);
	    }
	};
	
	
	//var msg_list=document.getElementById("msg-list");
	conn.listen({
	    onOpened: function ( message ) {          //连接成功回调
	        // 如果isAutoLogin设置为false，那么必须手动设置上线，否则无法收消息
	        // 手动上线指的是调用conn.setPresence(); 如果conn初始化时已将isAutoLogin设置为true
	        // 则无需调用conn.setPresence();  
	    },  
	    onClosed: function ( message ) {
	    	alert('guanbi ');
	    },         //连接关闭回调
	    onTextMessage: function ( message ) {
	    	conhylist(message);
	    	console.log(message);
	    	$("#ml"+message.from).append("<li>"+
                    "<img class='avatar' src='dist/images/1.jpg'>"+
                    "<div class='con'>"+
                       "<p class='time'><span>Coffce 2017/4/20 上午8:40:20</span></p>"+
                       "<div class='text'>"+message.data+"</div>"+
                    "</div></li>");
	    },    //收到文本消息
	    onEmojiMessage: function ( message ) {
	    	console.log(message);
	    	console.log('Emoji');
	    	var data = message.data;
	    	var zrkto=message.from;
	    	var str='';
	        for(var i = 0 , l = data.length ; i < l ; i++){
	            if(data[i].type=='emoji'){
	            	str+="<img class='emoji' src='"+data[i].data+"'>";
	            }else if(data[i].type=='txt'){
	            	str+=data[i].data;
	            }
	            
	        }
	        $("#ml"+zrkto).append("<li>"+
                    "<img class='avatar' src='dist/images/1.jpg'>"+
                    "<div class='con'>"+
                       "<p class='time'><span>Coffce 2017/4/20 上午8:40:20</span></p>"+
                       "<div class='text'>"+str+"</div>"+
                    "</div></li>");
	    },   //收到表情消息
	    onPictureMessage: function ( message ) {
	    	console.log(message);
	    	$("#ml"+message.from).append("<li>"+
                    "<img class='avatar' src='dist/images/1.jpg'>"+
                    "<div class='con'>"+
                       "<p class='time'><span>Coffce 2017/4/20 上午8:40:20</span></p>"+
                       "<div class='text'><img src='"+message.url+"'></div>"+
                    "</div></li>");
	    }, //收到图片消息
	    onCmdMessage: function ( message ) {},     //收到命令消息
	    onAudioMessage: function ( message ) {},   //收到音频消息
	    onLocationMessage: function ( message ) {},//收到位置消息
	    onFileMessage: function ( message ) {},    //收到文件消息
	    onVideoMessage: function (message) {
	        var node = document.getElementById('privateVideo');
	        var option = {
	            url: message.url,
	            headers: {
	              'Accept': 'audio/mp4'
	            },
	            onFileDownloadComplete: function (response) {
	                var objectURL = WebIM.utils.parseDownloadResponse.call(conn, response);
	                node.src = objectURL;
	            },
	            onFileDownloadError: function () {
	                console.log('File down load error.')
	            }
	        };
	        WebIM.utils.download.call(conn, option);
	    },   //收到视频消息
	    onPresence: function ( message ) {},       //收到联系人订阅请求、处理群组、聊天室被踢解散等消息
	    onRoster: function ( message ) {},         //处理好友申请
	    onInviteMessage: function ( message ) {},  //处理群组邀请
	    onOnline: function () {},                  //本机网络连接成功
	    onOffline: function () {},                 //本机网络掉线
	    onError: function ( message ) {},          //失败回调
	    onBlacklistUpdate: function (list) {       //黑名单变动
	        // 查询黑名单，将好友拉黑，将好友从黑名单移除都会回调这个函数，list则是黑名单现有的所有好友信息
	        console.log(list);
	    }
	    
	});
	
	conn.getRoster({
		  success: function ( roster ) {
			  console.log(roster);
		    //获取好友列表，并进行好友列表渲染，roster格式为：
		    /** [
		          {
		            jid:'asemoemo#chatdemoui_test1@easemob.com',
		            name:'test1',
		            subscription: 'both'
		          }
		        ]
		    */
		    for ( var i = 0, l = roster.length; i < l; i++ ) {
		      var ros = roster[i];    
		      //ros.subscription值为both/to为要显示的联系人，此处与APP需保持一致，才能保证两个客户端登录后的好友列表一致
		      if ( ros.subscription === 'both' || ros.subscription === 'to' ) {

		      }
		    }
		  },
		  error:function(roster){
			  console.log(roster);
		  },
		});
	
</script>

    
</body>
</html>
